<template>
	<view class="my-layout">
		<view class="order-address">
			<view class="address" @tap='getAddress'>
				<view class="add-left">
					<image class="address-icon" src="/static/shop/address.png" mode="widthFix"></image>
					<text class="fill-address">请填写联系人及收货地址</text>
				</view>
				<image class="add-right" src="/static/recharge/arrow.png" mode="widthFix"></image>
			</view>
			<view class="address" @tap='getAddress'>
				<view class="add-left">
					<image class="address-icon" src="/static/shop/address.png" mode="widthFix"></image>
					<view class="">
						<view class="address-info">
							<text class="info-user">李铁旦</text>
							<text class="info-tel">178****0000</text>
						</view>
						<view class="address-text">
							浙江省杭州市江干区钱江新城民路188号铁蛋大厦A座88楼
						</view>
					</view>
				</view>
				<image class="add-right" src="/static/recharge/arrow.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="order-info">
			<view class="info-num">订单号：{{'11223344556677889900'}}</view>
			<view class="product-info">
				<image class='product-img' src="/static/shop/tmall.png" mode="widthFix"></image>
				<view class="product-name">Daniel Wellington丹尼尔惠灵顿 DW简约金属表带女士腕表28mm 石英表 DW00100219,Daniel Wellington丹 					尼尔惠灵顿
					DW简约金属表带女士腕表28mm…</view>
			</view>
			<view class="order-price">
				价格 <text class="price-num">1,838,328.00</text>
			</view>
		</view>
		<view class="order-money">
			<view class="money-item">
				<text class="item-left">订单金额</text>
				<text class="item-right">1,828,334.00</text>
			</view>
			<view class="money-item">
				<text class="item-left">佣金</text>
				<text class="item-right color-red">1,828,334.00</text>
			</view>
			<view class="money-item">
				<text class="item-left">预计返还</text>
				<text class="item-right color-red">1,828,334.00</text>
			</view>
		</view>
		<view class="order-btn">
			<u-button type="warning" @tap='submitOrder'>提交订单</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			getAddress() { //获取邮寄地址

			},
			submitOrder(){ // 提交订单
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-address {
		margin: 20rpx 0 10rpx 0;
	}

	.address {
		padding: 28rpx 42rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.add-left {
			display: flex;
			align-items: center;
			padding-right: 30rpx;
		}

		.address-icon {
			width: 36rpx;
			margin-right: 12rpx;
		}

		.fill-address {
			font-size: 32rpx;
			height: 45rpx;
			line-height: 45rpx;
			vertical-align: top;
		}

		.address-info {
			color: #000000;
			font-size: 32rpx;
			height: 45rpx;
			line-height: 45rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.address-text {
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.add-right {
			width: 20rpx;
		}
	}

	.order-info {
		padding: 28rpx 42rpx;
		background-color: #FFFFFF;
		.info-num{
			padding-bottom: 20rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 42rpx;
			border-bottom: 1px solid #EEEEEE;
		}
		.product-info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #EEEEEE;
			.product-img{
				margin-right: 20rpx;
				width: 440px;
				border: 1px solid #EEEEEE;
				border-radius: 8rpx;
			}
			.product-name{
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				overflow: hidden;
			}
		}
		.order-price{
			padding-top: 24rpx;
			display: flex;
			justify-content: flex-end;
			.price-num{
				color: #F59328;
				font-size: 36rpx;
				line-height: 42rpx;
				margin-left: 10rpx;
			}
		}
	}
	.order-money{
		padding: 28rpx 42rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;
		margin-bottom: 60rpx;
		.money-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.item-left{
				font-size: 30rpx;
				color: #000000;
				line-height: 60rpx;
			}
			.item-right{
				font-size: 36rpx;
				color: #000000;
				line-height: 60rpx;
			}
			.color-red{
				color: #FE004F;
			}
		}
	}
	.order-btn{
		margin: 0 42rpx;
	}
		
</style>
